<template>
  <div style="padding: 20px">
    <div
      style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;
      "
    >
      收藏列表
    </div>
    <div v-if="collectList && collectList.length > 0">
      <van-row
        v-for="(i, index) in collectList"
        :key="index"
        :gutter="10"
        @click="gotoProductInfo(i)"
        style="
          border-bottom: 1px solid #e3e3e3;
          background: #fff;
          text-align: center;
        "
      >
        <van-col :span="10" style="text-align: center">
          <img :src="i.img" style="width: 100%" />
        </van-col>
        <van-col :span="6" style="text-align: center; line-height: 124px">
          <span>{{ i.name }}</span>
        </van-col>
        <van-col :span="6" style="text-align: right; line-height: 124px">
          <!-- <van-icon name="cross" @click="removeProduct(i)"/> -->

          <span>{{ i.unit }}{{ i.totalPrice }}</span>
        </van-col>
        <van-col :span="2" style="text-align: right; line-height: 124px">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
    </div>
    <van-empty description="还没有收藏哦" v-else />

    <div class="my-button">
      <div style="padding: 10px 20px" @click="addCart">
        <span> 全部添加购物车 </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { myMixin } from "./../mixin.js";

import { userStore } from "../store/piniaStore";
const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let collectList = useUserStore.collectList;
let cartList = useUserStore.cartList;

function gotoProductInfo(i) {
  if (!i.num) i.num = 1;
  i.totalPrice = i.num * i.price;
  window.localStorage.setItem("currentProduct", JSON.stringify(i));
  window.localStorage.setItem("lastPage", "collect");

  router.push("productInfo");
}

function addCart() {
  if (collectList && collectList.length > 0) {
    collectList.forEach((i) => {
      i.num = 1;
      i.totalPrice = i.price;
      let isExist = cartList.some((cartProduct) => {
        if (cartProduct.id == i.id) {
          cartProduct.num += 1;
          cartProduct.totalPrice = cartProduct.num * i.price;
          return true;
        }
      });
      if (!isExist) {
        cartList.push(i);
      }
    });
    useUserStore.calcluteCart();

    successMsgBox("添加成功");
  }
}
</script>

<style></style>
